<!-- 本页样式 -->
<style scoped lang="scss">
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
</style>
<style lang="scss">
.applybatch_list {
  .transform {
    .el-icon-sort {
      transform: rotate(90deg) !important;
    }
  }
}
.applybatch-list-popover {
  // background: rgb(243, 243, 243) !important;
  // border-color: #c6e2ff !important;
  // background-color: #ecf5ff;
  .popper__arrow::after {
    // border-left-color: rgb(243, 243, 243) !important;
    border-left-color: #409eff !important;
    // border-left-color: #c6e2ff !important;
    // background-color: #ecf5ff;
  }
}
.delconfirm {
  border: solid 1px #db2828;
  line-height: 30px;
  border-radius: 2px;
  background-color: #ffe8e6;
  color: #db2828;
  margin: 1em 0em;
  padding: 5px 10px;
}
.delconfirminput {
  .el-input__inner {
    background: #fff0f0;
    border-color: #dbb1b1;
    color: #d95c5c;
    border-radius: 2px;
  }
}
.deldialog {
  .el-dialog__body {
    padding: 0px 20px 10px;
  }
}
.el-tooltip__popper {
  max-width: 30%;
}
.tabcolumn_left,
.tabcolumn_left > .cell {
  width: 150px !important;
}
.el-table .cell {
  white-space: nowrap !important;
}
</style>
<!-- 页面布局-->
<template>
  <div class="table applybatch_list">
    <!-- 标题导航栏 -->
    <div class="title-box crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-tickets"></i>芯片信息管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>芯片管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 主体区 -->
    <div class="container">
      <!-- 查询条件 -->
      <div class="search-box">
        <div class="search-item-box">
          <table>
            <tr>
              <td>
                <i class="el-icon-search"></i>
              </td>
              <td class="search_td" style="width: 190px">
                <el-input
                  v-model="parampters.chipName"
                  placeholder="芯片名称"
                  clearable
                  class="handle-input mr10"
                  style="width: 190px"
                ></el-input>
              </td>
              <td class="search_td" style="width: 190px">
                <el-input
                  v-model="parampters.chipCode"
                  placeholder="芯片编号"
                  clearable
                  class="handle-input mr10"
                  style="width: 190px"
                ></el-input>
              </td>
              <td class="search_td" style="width: 190px">
                <el-select
                  clearable
                  v-model="parampters.status"
                  class="handle-input mr10"
                  style="width: 190px"
                  placeholder="状态"
                >
                  <el-option
                    v-for="item in dicts.chip"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </td>
            </tr>
          </table>
        </div>
        <div class="search-button-box">
          <el-button
            type="primary"
            size="small"
            icon="search"
            @click="searchLoad"
            >查询</el-button
          >
          <el-button type icon="el-icon-circle-plus" size="small" @click="toAdd"
            >新增</el-button
          >
        </div>
      </div>
      <!-- 查询条件END -->
      <!-- 数据列表 -->
      <div class="grid-data-box" :style="autoHeight">
        <el-table
          :data="tableData"
          border
          stripe
          :cell-class-name="changeColumnClass"
          :header-cell-style="{ background: '#F3F3F3', color: '#606266' }"
          show-overflow-tooltip
          style="width: 100%"
          ref="multipleTable"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
            show-overflow-tooltip
          ></el-table-column>
          <template v-for="(column, i) in columnData">
            <el-table-column
              :prop="column.columnCode"
              :key="i"
              sortable
              :width="
                column.columnCode == 'timestamp' ||
                column.columnCode == 'produceCode'
                  ? '150'
                  : 'auto'
              "
              v-if="
                column.visiable == '1' ||
                (column.visiable == 1 && column.columnCode != 'chipId')
              "
              :label="column.columnName"
              show-overflow-tooltip
            >
            </el-table-column>
          </template>
          <el-table-column label="操作" fixed="right" width="150">
            <template slot-scope="scope">
              <el-popover
                placement="left"
                width="180"
                trigger="hover"
                popper-class="applybatch-list-popover"
              >
                <div class="fxcol fxcc" style="margin: 10px 0">
                  <template v-for="item in rightButton">
                    <el-button
                      v-if="item.config.includes(scope.row.status)"
                      size="mini"
                      :key="item.ms_resource_id"
                      :type="item.type"
                      @click="handleClickMore(scope.row, item.method)"
                      :style="{
                        width: '135px',
                        margin: item.ms_resource_id != '1' ? '10px 0 0 0' : '',
                      }"
                      >{{ item.name }}</el-button
                    >
                  </template>
                </div>
                <span slot="reference" style="cursor: pointer">更多</span>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 数据列表END -->
      <!-- 翻页导航条 -->
      <div class="navigate-box">
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :total="parampters.totalCount"
            @size-change="handleSizeChange"
            :current-page.sync="parampters.pageIndex"
            :page-sizes="[20, 50, 100, 200]"
            :page-size="parampters.pageRows"
            layout="total, sizes, prev, pager, next"
          ></el-pagination>
        </div>
      </div>
      <!-- 翻页导航条END -->
    </div>
  </div>
</template>
<script>
import chipdetail from "./chip_upd";

export default {
  data() {
    return {
      autoHeight: {
        minHeight: this.$util.setTableHeight() + "px",
      },
      // 筛选条件
      parampters: {
        //查询参数
        loginsid: "", //登录会话SID
        pageRows: 20, //每页行数
        pageIndex: 1, //当前页
        pageCount: 0, //总页数
        totalCount: 0, //总记录数
        chipName: "", //芯片名称
        chipCode: "", //芯片编号
        status: "",
      },
      statusList: [],
      // 查询出的表格数据
      tableLoading: true,
      columnData: [],
      tableData: [],
      //confirm提示信息弹框
      confirmBox: null,
      //所选记录id
      selectedId: "",
      //事物类型
      actType: "list",
      //字典集
      dicts: {},
      dialogVisible: false,
      dialog_time: 5,
      dialogTimer: null,
      delDialogVisible: false,
      delApplyBatchNo: "",
      confirmDelApplyBatchNo: "",
      showDeltips: false,
      allStatusButton: [],
      rightButton: [
        {
          id: 0,
          tag: "view",
          name: "查看",
          config: ["disapproved", "new", "visable", "invisable", "approved"],
          method: "toView",
          type: "primary",
        },
        {
          id: 1,
          tag: "upd",
          name: "修改",
          config: ["disapproved", "new"],
          method: "toUpd",
          type: "primary",
        },
        {
          id: 2,
          tag: "delete",
          name: "删除",
          config: ["disapproved", "new", "visable", "invisable", "approved"],
          method: "toDel",
          type: "primary",
        },
        {
          id: 3,
          tag: "shenhe",
          name: "审核",
          config: ["new"],
          method: "toShenhe",
          type: "primary",
        },
        {
          id: 4,
          tag: "visable",
          name: "启用",
          config: ["invisable", "approved"],
          method: "toVisable",
          type: "primary",
        },
        {
          id: 5,
          tag: "invisable",
          name: "禁用",
          config: ["visable"],
          method: "toInVisable",
          type: "primary",
        },
      ],
    };
  },
  computed: {
    disableDelBtn: function () {
      if (
        this.confirmDelApplyBatchNo == "" ||
        this.confirmDelApplyBatchNo == undefined ||
        this.confirmDelApplyBatchNo == null
      )
        return true;
      else return false;
    },
  },
  // 进入页面加载数据
  activated() {
    // this.$set(this.parampters, "dataFormatNo", "");
    // this.$set(this.parampters, "year", "");
    // this.$set(this.parampters, "applyBatchNo", "");
    // this.$set(this.parampters, "status", "");
    // this.$set(this.parampters, "starttime", "");
    // this.$set(this.parampters, "endtime", "");
    this.handleInitLoad();
  },
  methods: {
    /**
     * 组件初始化加载
     */
    handleInitLoad() {
      this.initSelectOptoins();
      this.loadColumnData();
      this.searchLoad();
    },

    /**
     * 初始加载字典选项
     */
    initSelectOptoins() {
      this.loadSelectOptoins("chip", { type: "billStatus" });
      // this.loadSelectOptoins("chip", { type: "chip" });
    },

    /**
     * 通用定义:下拉字典
     *  @augments dictKind 字典类型
     */
    loadSelectOptoins(dictKind, params) {
      let url = "/herp/dictionary/";
      this.$axios
        .get(url, {
          params: params,
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.$set(this.dicts, dictKind, data.data.list);
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    changeColumnClass(data) {
      // if (data.columnIndex == 2 || data.columnIndex == 14) {
      //   data.column.width = 150;
      //   return "tabcolumn_left";
      // }
    },

    /**
     * @augments  row 行所在的数据
     * 表格数据列 内容字典转换
     */
    formatter(row, column) {
      if (column.property == "dataformatNo") {
        return this.$dicts.transDict(
          this.dicts.dataformatNo,
          "code",
          "name",
          row.dataformatNo
        );
      } else if (column.property == "status") {
        return this.$dicts.transDict(
          this.dicts.cardapply,
          "code",
          "name",
          row.status
        );
      } else if (column.property == "timestamp") {
        if (
          row.timestamp == undefined ||
          row.timestamp == null ||
          row.timestamp == ""
        ) {
          return "";
        } else {
          let now = new Date(Number(row.timestamp));
          let y = now.getFullYear();
          let m = now.getMonth() + 1;
          let d = now.getDate();
          return (
            y +
            "-" +
            (m < 10 ? "0" + m : m) +
            "-" +
            (d < 10 ? "0" + d : d) +
            " " +
            now.toTimeString().substr(0, 8)
          );
        }
      }
    },

    /**
     * @augments val 页码
     * 切换页码操作
     */
    handleCurrentChange(val) {
      this.parampters.pageIndex = val;
      // 重新获取当前页码的数据
      this.searchLoad();
    },

    /**
     * @augments val 每页显示条数
     * 每页显示条数修改
     */
    handleSizeChange(val) {
      // 修改每页显示条数
      this.parampters.pageRows = val;
      // 重新获取数据
      this.searchLoad();
    },
    /**
     * 获取所有状态值的可操作按钮列表
     */
    getStatusAllButton() {
      this.$axios
        .get("/herp/cardApplyBatch/button/?" + new Date().getTime(), {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.allStatusButton = data.data;
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 加载任务表格的表头
     */
    loadColumnData(item) {
      this.$axios
        .get(`/herp/table/chip/column/`, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this.columnData = data.data;
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    /**
     * 条件筛选查询,加载数据
     */
    searchLoad() {
      this.parampters = this.$util.trimObjStr(this.parampters);
      this.parampters.loginsid = this.$util.getLoginer().sessionId;
      this.tableLoading = true;
      this.$axios
        .get("/bill/chip/", {
          params: this.parampters,
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.tableData = data.data.list;
            this.tableLoading = false;
            this.parampters.pageIndex =
              data.data.pageNum != undefined ? parseInt(data.data.pageNum) : 0;
            this.parampters.pageCount =
              data.data.totalPage != undefined
                ? parseInt(data.data.totalPage)
                : 0;
            this.parampters.totalCount =
              data.data.count != undefined ? parseInt(data.data.count) : 0;
          } else {
            this.tableLoading = false;
            this.$error(data.message);
          }
        })
        .catch((err) => {
          this.tableLoading = false;
          console.log(err);
        });
    },

    /**
     * 获取右侧可点击按钮
     */
    getRightButton(row) {
      // let rightbtn = this.allStatusButton[row.status];
      // this.rightButton = this.allStatusButton;
      // console.log(this.rightButton)
      // this.allRightButton.forEach(button => {
      //   rightbtn.forEach(item => {
      //     if (button.tag == item.tag) {
      //       this.rightButton.push(button);
      //     }
      //   });
      // });
    },

    /**
     * 点击右侧按钮
     */
    handleClickMore(row, method) {
      this[method](row);
    },
    //新增任务
    toAdd() {
      //页面参数
      var pageParam = {
        seleid: "-1",
        actType: "add",
      };
      let commDialog = this.$dialog.commDialog(
        "新增芯片",
        chipdetail,
        pageParam,
        this.$util.setDialogWidth(),
        this.$util.setDialogHeight()
      );
      commDialog.exec.then((resp) => {
        if (resp.type == "ok") {
          this.searchLoad();
        } else if (resp.type == "cancel") {
        }
      });
    },
    /**
     * 查看记录信息
     * @augments row 编辑数据行的数据
     * @augments ev
     */
    toView(row) {
      this.selectedId = row.chipId;
      //页面参数
      var pageParam = {
        seleid: this.selectedId,
        actType: "view",
      };
      let commDialog = this.$dialog.commDialog(
        "查看芯片信息",
        chipdetail,
        pageParam,
        this.$util.setDialogWidth(),
        this.$util.setDialogHeight()
      );
      commDialog.exec.then((resp) => {
        if (resp.type == "ok") {
          this.searchLoad();
        } else if (resp.type == "cancel") {
        }
      });
    },
    /**
     * 修改记录信息
     * @augments row 编辑数据行的数据
     * @augments ev
     */
    toUpd(row) {
      this.selectedId = row.chipId;
      //页面参数
      var pageParam = {
        seleid: this.selectedId,
        actType: "upd",
      };
      let commDialog = this.$dialog.commDialog(
        "修改芯片信息",
        chipdetail,
        pageParam,
        this.$util.setDialogWidth(),
        this.$util.setDialogHeight()
      );
      commDialog.exec.then((resp) => {
        if (resp.type == "ok") {
          this.searchLoad();
        } else if (resp.type == "cancel") {
        }
      });
    },
    /**
     * 审核记录信息
     * @augments row 编辑数据行的数据
     * @augments ev
     */
    toShenhe(row) {
      this.selectedId = row.chipId;
      //页面参数
      var pageParam = {
        seleid: this.selectedId,
        actType: "shenhe",
      };
      let commDialog = this.$dialog.commDialog(
        "审核芯片信息",
        chipdetail,
        pageParam,
        this.$util.setDialogWidth(),
        this.$util.setDialogHeight()
      );
      commDialog.exec.then((resp) => {
        if (resp.type == "ok") {
          this.searchLoad();
        } else if (resp.type == "cancel") {
        }
      });
    },
    /**
     * 删除记录信息
     * @augments index 所在表格行的索引
     * @augments row 所在表格行的所有数据对象
     */
    toDel(row) {
      this.selectedId = row.chipId;
      this.confirmBox = this.$dialog.confirm("确定删除所选记录吗？");
      this.confirmBox.exec.then((btnName) => {
        if (btnName == "ok") {
          // 确定删除数据操作
          this.$axios
            .delete(
              `/bill/chip/${this.selectedId}/`,
              {
                loginsid: this.$util.getLoginer().sessionId,
              },
              {
                headers: {
                  operator: this.$util.getLoginer().userid,
                  withCredentials: true,
                },
              }
            )
            .then((res) => {
              let data = res.data;
              if (data.success) {
                this.$dialog.close(this.confirmBox.vm);
                this.$message.success("删除成功");
                this.searchLoad();
              } else {
                this.$dialog.close(this.confirmBox.vm);
                this.$error(data.message);
              }
            })
            .catch((err) => {
              this.$dialog.close(this.confirmBox.vm); // 取消删除数据操作
            });
        } else {
          this.$dialog.close(this.confirmBox.vm); // 取消删除数据操作
        }
      });
    },
    toVisable(row) {
      this.selectedId = row.chipId;
      this.toTriggerVisable(this.selectedId, "visable");
    },
    toInVisable(row) {
      this.selectedId = row.chipId;
      this.toTriggerVisable(this.selectedId, "invisable");
    },
    toTriggerVisable(chipId, status) {
      let url = `/bill/chip/${chipId}/${status}/`;
      this.$axios
        .post(url)
        .then((res) => {
          // 关闭提交表单的loading
          this.fullscreenLoading = false;
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            this.$message({
              message: data.message || "状态改变成功",
              type: "success",
            });
            this.searchLoad();
          } else {
            this.$error(data.message);
          }
        })
        .catch((error) => {
          this.fullscreenLoading = false;
        });
    },
  },
};
</script>
